<template>
	<view>
		<cu-custom bgColor="bg-white">
			<block slot="right">
				<view class="color-100 bar-left " style="display: flex;">
					<text  class="left-text" style="margin-left: 15px;">消息</text>
					<view class="cu-tag badge"  v-if="countAll() > 0" >{{countAll() > 100 ? '99+' :countAll()  }}</view>
				</view>
			</block>
		</cu-custom>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="empty" v-if="conversation.length ===0" >
				<view class="empty-img padding">
					<image src="../../static/message/empty.png"></image>
				</view>
				<view class="empty-desc">
					<text >暂无消息，快来寻找你感兴趣的好友聊天吧！</text>
				</view>
			</view>
			
			
			<view 
				class="cu-list menu-avatar margin-bottom-60"
			>
				<view 
					class="cu-item"
					:class="modalName=='move-box-'+ index?'move-cur':''" 
					v-for="(item,index) in conversation"
					:key="index"
					@touchstart="ListTouchStart" 
					@touchmove="ListTouchMove"
					@touchend="ListTouchEnd" 
					@tap="NavTo(item)"
					:data-target="'move-box-' + index"
				>
					<view class="cu-avatar square lg" :style="[{background: 'url('+showImgTour(item.avatar)+')'}]">
						<view class="cu-tag badge"  v-if="item.unread_msg_count > 0">{{item.unread_msg_count > 100 ? '99+' :item.unread_msg_count }}</view>
					</view>
					<view class="content" >
						<view class="text-black ">{{item.nickName}}</view>
						<view class="text-gray text-sm showline">
							<text class=" text-grey  margin-right-xs">{{item.content}}</text>
							<!-- 暂无消息 -->
						</view>
					</view>
				
					<view class="move">
						<!-- <view class="bg-grey">置顶</view> -->
						<view class="bg-red" @click="deleteConversation(item)">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex';
	import jpushIM from '@/js_sdk/jim.js'
	
	export default {
		data() {
			return {
				listTouchStart: 0,
				listTouchEnd: 0,
				modalName: null,
				listTouchDirection: null,
				slidestep:1,
				// 未读消息的总数
				unread_msg_count_all:0
			};
		},
		computed:{
	
			hasLogin(){
				return this.$store.getters.hasLogin;
			},
			syncConversation(){
				return this.$store.getters.syncConversation;
			},
			conversation(){
				return this.$store.getters.conversation.reverse();
			}
		},
		watch:{
			syncConversation(n){
				if(n.length){
					this.$store.dispatch('jimGetConversation')
				}
			}
		},
		onLoad(){
			if(!jpushIM.isInit()) {
				this.$store.dispatch('jimInit')
			}
			if(!jpushIM.isLogin()) {
				const jmAccount = {
					"username": "jiguang_92",
					"password": "123456"
				}
				
				let data = uni.getStorageSync('jimLoginInfo') || jmAccount
				this.$store.dispatch('jimLogin', data);
			}
		},
		methods: {
			// 显示头像
			showImgTour(tour){
				if(tour) {
					return tour
				} else {
					return '../../static/editdata/man.png'
				}
			},
			NavTo(s){
				if(this.slidestep == 1 && this.listTouchEnd == 0) {
					uni.navigateTo({
						url: '/pages/message/char?username=' + s.username
					})
				}
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
				this.slidestep  = 1
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
				this.listTouchEnd = e.touches[0].pageX
				this.slidestep  = 2
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else if (this.listTouchDirection == 'right'){
					this.slidestep = 3
					this.listTouchEnd = 0
					this.modalName = null
				}else {
					this.modalName = null
				}
				// 表示 滑动显示删除后 然后点击事件
				if(this.slidestep == 1 && this.listTouchEnd != 0 ){
					this.slidestep = 3 
					this.listTouchEnd = 0
				}
				this.listTouchDirection = null
				
			},
			
			countAll() {
				let sum = this.conversation.reduce(function(prev, cur, index, arr) {
				    return prev + cur.unread_msg_count;
				}, 0)
				return sum
			},
			// 移除会话列表
			deleteConversation(item) {
				uni.showLoading({
					title: '加载中..'
				})
				const extras = {
					type: 'remove'
				}
				let params = {
					username: item.username,
					extras
				}
			
				this.$store.dispatch('updateConversationForUser', params)
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	image{
		width: 100%;
		height: 100%;
	}
	.bar-left {
		position: absolute;
		.left-text {
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 21px;
			color: #333333;
		}
		.left-right {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 21px;
			color: #333333;
		}
	}
	
	.margin-bottom-60{
		margin-bottom: 60px;
	}
	.cu-avatar{
		background-size: 100% 100% !important;
		background-color:#EEE !important;
	}
	.empty{
		width: 100%;
		margin-top: 67px;
		&-img{
			width: 230px;
			height: 122px;
			margin: auto;
		}
		&-desc{
			
			margin: auto;
			text-align: center;
			text{
				font-size: 10px;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 14px;
				color: #666666;
			}
		}
	}
	.showline{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
